<!--引入面包屑组件-->
<pro-header></pro-header>

<nz-card [nzBordered]="false">
    <!--  form表单搜索 -->
    <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label for="name">操作员姓名</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="operator.operatorName" name="operatorName" [nzSize]="'large'" [nzPlaceHolder]="'操作员姓名'" nzId="operatorName"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label for="name">登陆用户名</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="operator.userId" name="userId" [nzSize]="'large'" [nzPlaceHolder]="'登陆用户名'" nzId="userId"></nz-input>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label for="status">操作员状态</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select [(ngModel)]="operator.operatorStatus" nzAllowClear name="status" nzId="status" [nzPlaceHolder]="'操作员状态'" [nzShowSearch]="true" [nzSize]="'large'">
                            <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">认证模式</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="operator.authMode" nzAllowClear  name="authMode" [nzSize]="'large'" [nzPlaceHolder]="'操作员状态'" nzId="authMode">
                            <nz-option  *ngFor="let i of authStype" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                <a (click)="expandForm=!expandForm">
                    {{expandForm ? '收起' : '展开'}}
                    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                </a>
            </div>
        </div>
    </form>

    <!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
    <app-list (addCreat)="addHandler($event)"
              [configTitle]="listTitle"
              [selectedRows]="selectedRows"
              (buttonEvent)="buttonEvent($event)"
              (buttonData)="buttonDataHandler($event)"
              (selectedRow)="selectedRow($event)"
              (pageNumber)="monitorHandler($event)"
              (deleatData)="deleatData($event)"
              (deleteBatch)="deleteBatch($event)"
              (isActive)="isActive($event)"
              [initDate] = "data"
              [headerDate] = "headerData"
              [moreData] = "moreData"
              [buttons]="buttons"
              [loading]="loading"
              [pageindex]='pageIndex'
              [total]="total"></app-list>
</nz-card>
<!--引入列表组件-->

<!--弹出框信息-->
<nz-modal [nzVisible]="modalVisible" [nzMaskClosable]="false" [nzWidth]="1024" [nzTitle]="configTitle" [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="cencel()" (nzOnOk)="save()">
    <ng-template #modalContent>
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">操作员姓名</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="operatorAdd.operatorName" name="operatorName" [nzSize]="'large'" [nzPlaceHolder]="'操作员姓名'" nzId="operatorName"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">登陆用户名</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="operatorAdd.userId" name="userId" [nzSize]="'large'" [nzPlaceHolder]="'登陆用户名'" nzId="userId"
                                  (nzBlur)="userIdCodeexit(configTitle, operatorAdd.userId)"></nz-input>
                        <nz-alert *ngIf='iSlah' nzBanner nzMessage="已存在相同的登陆用户名，请重新输入"></nz-alert>
                    </div>

                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md" *ngIf="configTitle === '新建操作员'">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">登陆密码</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="operatorAdd.password" name="password" [nzSize]="'large'" [nzPlaceHolder]="'登陆密码'" nzId="password"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">操作员状态</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="operatorAdd.operatorStatus" nzAllowClear disabled name="status"  [nzSize]="'large'" [nzPlaceHolder]="'操作员状态'" nzId="status">
                            <nz-option  *ngFor="let i of status; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">认证模式</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="operatorAdd.authMode" nzAllowClear  name="authMode" [nzSize]="'large'" [nzPlaceHolder]="'认证模式'" nzId="authMode">
                            <nz-option  *ngFor="let i of authStype; let idx = index" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">锁定次数</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="operatorAdd.lockLimit" name="lockLimit" [nzSize]="'large'" [nzPlaceHolder]="'锁定次数'" nzId="lockLimit"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="12" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="alignment"><label for="no">密码失效日期</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-datepicker [(ngModel)]="operatorAdd.invalDate" name="invalDate" [nzSize]="'large'" [nzPlaceHolder]="'密码失效日期'" nzId="invalDate" class="d-block"></nz-datepicker>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</nz-modal>



<!-- 重置密码 -->
<nz-modal [nzVisible]="resetPassword" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="reactPassword"  [nzConfirmLoading]="loading" [nzContent]="modaleContent"
          [nzFooter]="modalFooter" (nzOnCancel)="resetPassword = false">
    <ng-template #modaleContent>
        <form novalidate  (ngSubmit)="resetPas(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">用户名</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="resetPawword.userId" name="userId"  disabled  [nzSize]="'large'" [nzPlaceHolder]="'用户名'" nzId="userId"></nz-input>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>操作员姓名</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="resetPawword.operatorName" required name="operatorName" disabled [nzSize]="'large'" [nzPlaceHolder]="'操作员姓名'" nzId="operatorName"></nz-input>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">新密码</label><span [ngClass]="{'fromErrors':newPassword.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="resetPawword.newPassword" name="newPassword" #newPassword="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'新密码'" nzId="newPassword"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="newPassword.errors?.required && newPassword.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入新密码
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">重复密码</label><span [ngClass]="{'fromErrors':repeatPassword.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="resetPawword.repeatPassword" name="repeatPassword"  #repeatPassword="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'重复密码'" nzId="repeatPassword"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="repeatPassword.errors?.required && repeatPassword.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        <span>请再次输入密码</span>
                    </div>
                </div>
               <!-- <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">请输入密码</label><span [ngClass]="{'fromErrors':Password.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="resetPawword.Password" name="Password"  #Password="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'请输入密码'" nzId="Password"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="Password.errors?.required && Password.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入新密码
                    </div>
                </div>-->
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="resetPassword = false">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <ng-template #modalFooter></ng-template>
</nz-modal>
